<template>
	<div ref="menus"
		class="menus" 
		v-show="show"
		@contextmenu.prevent.stop>
		<div class="menu" 
			v-for="(item, i) in menuList" 
			:key="item.name"
			@click.prevent.stop="handleMenuClick($event, item)" >
			{{item.title}}
		</div>
	</div>
</template>
<script>
	import menuConfig from './configs.js';
	export default {
		name: 'Context',
		data: function(){
			return {
				show: false,
				state:{},
				menuList: [],
			};

		},

		methods: {
			handleMouseEvt: function(evtMsg){
				let self = this;
				let from = evtMsg.from;
				let event = evtMsg.event;
				let target = evtMsg.event.target;
				if('contextmenu' != event.type){
					self.show = self.show && self.$refs.menus.contains(target);
					return;
				}
				event.preventDefault();
				event.stopPropagation();
				self.$refs.menus.style.top = event.y + 'px';
				self.$refs.menus.style.left = event.x + 'px';
				self.menuList = 'mask' == from ? menuConfig.maskMenus : menuConfig.pageMenus;
				self.state.lastTarget = target;
				self.show = true;

			},

			handleMenuClick: function(event, menuInfo){
				let self = this;
				self.$bus.$emit('menu-event', {menu: menuInfo, element: self.state.lastTarget, event: event});
				self.show = false;

			}
		
		},

		mounted: function(){
			let self = this;
			self.$bus.$on('mouse-event', evtMsg => {self.handleMouseEvt(evtMsg)});
			self.$bus.$on('context-event', evtMsg => {self.handleMouseEvt(evtMsg)});

		}

	
	}
</script>
<style scoped>
	.menus{
		position: fixed;
		min-width: 260px;
		background: #2196f3;
	    overflow: hidden;
	    z-index: calc(var(--base-layer) + 2);
	    font-size: 12px;
	}

	.menus .menu{
		cursor: pointer;
	    border-bottom: 1px solid;
	    padding: 5px 10px;
	    color: white;
	    user-select: none;
	}

	.menus .menu:last-child{
		border: none;
	}

	.menus .menu:hover{
		background: #e3e6e887;
	    color: white;
	}	
</style>